@charset "utf-8";

@xiaomiColor:#ff6a00;
@box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
.none{display: none;}

// 顶部购物车标题
header{
    border-bottom: 2px solid @xiaomiColor;
    .warpper{
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title{
            display: flex;
            img{width: 48px;height: 48px;;margin-right: 45px;}
            p{font-size: 28px;line-height: 46px;}
            span{color: #757575;font-size: 12px;margin-left: 15px;}
        }
        ul.user{
            display: flex;
            line-height: 20px;
            i{font-size: 12px;color: #b0b0b0;margin-top: 2px;}
            >li{
                position: relative;
                >a{
                    font-size: 12px;
                    color: #757575;
                    padding: 0 15px;
                    span{font-size: 12px;margin: 0 10px;}
                }
                &:hover{
                    a{color: @xiaomiColor}
                    ul.sub_user{height: 160px;padding-top: 10px}
                } 
            }
            ul.sub_user{
                position: absolute;
                right: 0;
                top: 30px;
                background-color: #fff;
                box-shadow: @box-shadow;
                display: flex;
                flex-flow: column;
                text-align: center;
                width: 112px;
                height: 0;
                overflow: hidden;
                transition: all .3s;
                a{
                    display: block;
                    font-size: 12px;
                    line-height: 30px;
                    color: #333;
                    &:hover{
                        background-color: #f5f5f5;
                        color: @xiaomiColor;
                    }
                }
            }
        }
    }
}

// 空购物车
.empty_list{
    background-color: #f5f5f5;
    .warpper{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 480px;
        .empty_txt{
            width: 550px;
            margin-left: 80px;
            h2{font-size: 36px;font-weight: bold;color: #b0b0b0;margin-bottom: 20px;}
            p a{
                display: inline-block;
                text-align: center;
                width: 170px;
                line-height: 50px;
                color: white;
                background-color: @xiaomiColor;
                border: 1px solid @xiaomiColor;
                transition: all .3s;
                &:hover{background-color: darken(@xiaomiColor,5%);border-color: darken(@xiaomiColor,5%);}
            }
        }
    }
}

// 购物车
#list{
    background-color: #f5f5f5;
    padding-top: 40px;
    li{
        background-color: white;
        line-height: 116px;
        height: 116px;
        display: flex;
        padding: 0 25px;
        box-sizing: border-box;
        color: #424242;
        border-bottom: 1px solid #e0e0e0;
        &:last-child{border-bottom: none;}
        p.check{
            width: 80px;
            input{
                margin-right: 15px;
                position: relative;
                cursor: pointer;
                &[type=checkbox]::after{
                    position: absolute;
                    top: -1px;
                    left: -2px;
                    background-color: white;
                    border: 1px solid #b0b0b0;
                    border-radius: 3px;
                    color: #fff;
                    width: 14px;
                    height: 14px;
                    display: inline-block;
                    visibility: visible;
                    text-align: center;
                    content: ' ';
                }

                &[type=checkbox]:checked::after{
                    position: relative;
                    content: "✓";
                    line-height: 14px;
                    font-size: 12px;
                    font-weight: bold;
                    background-color: @xiaomiColor;
                    border-color: @xiaomiColor;
                }
            }
        }
        p.screenshot{
            width: 130px;
            img{height: 65px;margin-top: 25px;}
        }
        p.products{
            width: 360px;
        }
        p.products_prices{
            width: 180px;
            display: flex;
            justify-content: center;
        }
        p.products_count{
            width: 150px;
            display: flex;
            justify-content: center;
            text-align: center;
            align-items: center;
            a{
                width: 40px;
                line-height: 40px;
                font-weight: bold;
                border: 1px solid #e0e0e0;
                color: #757575;
                cursor: pointer;
                user-select: none;
                transition: background-color .3s;
                &:hover{background-color: #e0e0e0;}
            }
            input{
                width: 70px;
                text-align: center;
                font-size: 16px;
                line-height: 40px;
                border-top: 1px solid #e0e0e0;
                border-bottom: 1px solid #e0e0e0;
            }
        }
        p.products_subtotal{
            width: 120px;
            margin-right: 80px;
            color: @xiaomiColor;
            display: flex;
            justify-content: flex-end;
        }
        p.products_remove{
            flex: 1;
            text-align: center;
            a{
                display: inline-block;
                text-align: center;
                color: #333;
                width: 20px;
                height: 20px;
                line-height: 20px;
                background-color: white;
                border-radius: 50%;
                transition: all .3s;
                font-weight: bold;
                &:hover{background-color: #e53935;color: white;}
            }
        }
    }
    li.list_title{
        line-height: 70px;
        height: 70px;
        font-size: 14px;
        p{color: #424242}
    }
}

// 结算
.settlement_list{
    // position: fixed;
    // bottom: -1px;
    width: 100%;
    z-index: 25;
    height: 50px;
    line-height: 45px;
    padding-top: 20px;
    background-color: #f5f5f5;
    .warpper{
        display: flex;
        justify-content: space-between;
        background-color: #fafafa;
        background-color: white;
        // box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.1);
    }
    .settlement_left{
        font-size: 14px;
        color: #757575;
        margin-left: 30px;
        i{color: #eee;margin: 0 15px;}
        em{color: @xiaomiColor;}
        a{color: #757575;transition: color .3s;&:hover{color: @xiaomiColor;}}
    }
    .settlement_right{
        display: flex;
        line-height: 45px;
        font-size: 14px;
        color: @xiaomiColor;
        em#total{font-size: 24px}
        button{
            margin-left: 50px;
            width: 200px;
            background-color: @xiaomiColor;
            color: white;
            border: none;
            font-size: 20px;
            cursor: pointer;
            outline: none;
            &:hover{background-color: darken(@xiaomiColor,5%)};
        }
    }
}

@import url(./products_more.less);
@import url(./footer.less);